<template>
  <view class="wrap">
    <view class="key-input">
      <view class="title">输入验证码</view>
      <view class="tips">验证码已发送至{{ username }}</view>
      <u-message-input :focus="true" :value="value" @finish="finish" mode="bottomLine" :maxlength="maxlength"></u-message-input>
      <text :class="{ error: error }">验证码错误，请重新输入</text>
      <view class="captcha">
        <text :class="{ noCaptcha: show }" @tap="noCaptcha">收不到验证码点这里</text>
        <text :class="{ regain: !show }">{{ second }}秒后重新获取验证码</text>
      </view>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
let second = 60;
export default {
  data() {
    return {
      username: '',
      verification_code: '',
      maxlength: 6,
      value: '',
      second: second,
      show: false,
      error: false,
      interval: null,
      title: '已发送验证码至您的手机'
    };
  },
  onLoad(options) {
    this.username = options.username;
    if (this.$u.test.email(this.username)) {
      this.title = '已发送验证码至您的邮箱';
    }
  },
  onReady() {
    // 首次触发验证码倒计时
    this.getCaptcha();
  },
  methods: {
    getCaptcha() {
      this.show = false;
      this.second = second;
      this.$refs.uToast.show({
        title: this.title,
        type: 'success'
      });
      this.interval = setInterval(() => {
        this.second--;
        if (this.second <= 0) {
          this.show = true;
          clearInterval(this.interval);
        }
      }, 1000);
    },
    noCaptcha() {
      let that = this;
      uni.showActionSheet({
        itemList: ['重新获取验证码'],
        success: function(res) {
          if (res.tapIndex === 0) {
            that.$api.getVerifiCode(that.username, that.getCaptcha());
          }
        }
      });
    },
    // 输入完验证码最后一位执行
    finish(value) {
      this.$loading();
      this.$api.post({
        url: 'user/public/codeLogin',
        data: {
          username: this.username,
          verification_code: value,
          device_type: this.$deviceType
        },
        success: res => {
          if (res.code == 1) {
            this.$store.commit('login', res.data);
			uni.switchTab({
				url:'/pages/my/user/user'
			})
            // this.$refs.uToast.show({
            //   title: res.msg,
            //   type: 'success',
            //   callback: () => {
            //     this.$u.route({
            //       type: 'back',
            //       delta: 2
            //     });
            //   }
            // });
          } else {
            this.$refs.uToast.show({
              title: res.msg,
              type: 'error'
            });
          }
        },
        complete: () => {
          uni.hideLoading();
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.wrap {
  padding: 80rpx;
}

.box {
  margin: 30rpx 0;
  font-size: 30rpx;
  color: 555;
}

.key-input {
  padding: 30rpx 0;
  text {
    display: none;
  }
  .error {
    display: block;
    color: red;
    font-size: 30rpx;
    margin: 20rpx 0;
  }
}

.title {
  font-size: 50rpx;
  color: #333;
}

.key-input .tips {
  font-size: 30rpx;
  color: #333;
  margin-top: 20rpx;
  margin-bottom: 60rpx;
}
.captcha {
  color: $u-type-warning;
  font-size: 30rpx;
  margin-top: 40rpx;
  .noCaptcha {
    display: block;
  }
  .regain {
    display: block;
  }
}
</style>
